<!--请款列表-->
<template>
  <div class="list-container">
    <el-form class="search-panel" v-model="sercchData" :inline="true">
      <el-form-item
        label-width="90px"
        class="search-input"
        label="业主姓名："
        prop="name"
      >
        <el-input v-model="sercchData.name" placeholder="班组名称"></el-input>
      </el-form-item>
      <el-form-item label-width="90px" label="请款状态：">
        <el-select v-model="status" placeholder="请选择">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label-width="90px"
        class="search-time"
        label="请款时间："
        prop="time"
      >
        <el-date-picker
          style="width: 250px"
          v-model="sercchData.startToEnd"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item style="width: 90px; text-align: right">
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-panel">
      <el-row class="table-operate">
        <el-button type="primary" icon="el-icon-plus" @click="toAddPorsonnel">
          新增请款
        </el-button>
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          @click="deleteSelectedList"
        >
          批量删除
        </el-button>
        <!-- <el-button @click="importTeam"> 导入 <i class="el-icon-upload2"/> </el-button> -->
      </el-row>
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="42" align="center">
        </el-table-column>
        <el-table-column type="index" width="55" label="序号" align="center">
        </el-table-column>
        <el-table-column
          prop="ownerName"
          label="业主方"
          min-width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column label="请款时间" min-width="100" align="center">
          <template slot-scope="scope">
            <div>
              {{
                tableData[scope.$index].updateTime
                  .replace("T", " ")
                  .substr(0, 10)
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="amount"
          label="请款金额"
          min-width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="sentAmount"
          label="已发放金额"
          min-width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="remainingAmount"
          label="剩余金额"
          min-width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="请款状态"
          min-width="80"
          align="center"
        >
          <template slot-scope="scope">
            {{ tableData[scope.$index].status == 0 ? "未拨款" : "已拨款" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="notes"
          label="请款说明"
          min-width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" min-width="130" align="center">
          <template slot-scope="scope">
            <el-button
              :disabled="scope.row.status != 0"
              @click.native.prevent="toPay(scope, tableData)"
              type="text"
              icon="el-icon-mouse"
              >拨款</el-button
            >
            <el-button
              @click.native.prevent="updateRow(scope, tableData)"
              type="text"
              icon="el-icon-edit"
              >修改</el-button
            >
            <el-button
              @click.native.prevent="deleteRow(scope.row, scope.$index)"
              type="text"
              icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(totalData / pageSize) }}页/{{ totalData }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="totalData"
        >
          >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getPaymentList, deletePayment } from "@/api/payment";
export default {
  data() {
    return {
      sercchData: {
        name: "",
        startToEnd: "",
      },
      // startToEnd:'',
      checked: false,
      listNum: "",
      // input: "",
      status: -1,
      selectedList: [],
      currentPage: 1,
      allData: [],
      // totalPage:50,
      pageSize: 10,
      totalData: 0,
      statusOptions: [
        { value: -1, label: "全部" },
        { value: 0, label: "未拨款" },
        { value: 1, label: "已拨款" },
      ],
      tableData: [],
    };
  },
  created() {
    this.getCPageData({
      currentPage: this.currentPage,
      pageSize: this.pageSize,
    });
  },
  methods: {
    onSubmit() {
      console.log(this.sercchData);
      this.getCPageData({
        owner_name: this.sercchData.name,
        status: this.status == -1 ? null : this.status,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
    },
    getResult() {
      const data = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        // startTime:this.formatDate(this.startToEnd[0]),
        // endTime:this.formatDate(this.startToEnd[1]),
        owner_name: this.input,
        status: this.status == -1 ? null : this.status,
      };
      this.getCPageData(data);
      // console.log(data);
    },
    //   获取当前页数据
    getCPageData(data) {
      // const data = {
      //   currentPage: this.currentPage,
      //   pageSize: this.pageSize,
      // };
      // console.log(data);
      getPaymentList(data).then((res) => {
        // const result = res.data.data.records;
        this.totalData = res.data.data.total;
        // console.log(res)
        this.tableData = res.data.data.records;
        //   this.tableData=[]
        //   result.forEach((e) => {
        //     this.tableData.push({
        //       id: e.id,
        //       name: e.ownerName,
        //       date: e.updateTime,
        //       amount: e.amount,
        //       sentAmount: e.sentAmount,
        //       remainingAmount: e.remainingAmount,
        //       status: e.status,
        //       notes: e.notes,
        //     });
        //   });
      });
    },
    // 修改选择状态
    handleSelectionChange(res) {
      this.selectedList = res;
    },
    deleteSelectedList() {
      // console.log(this.selectedList)
      if (this.selectedList.length > 0) {
        this.$confirm("是否确认批量删除该数据", "批量删除", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "none",
        })
          .then(() => {
            this.selectedList.forEach((e) => {
              deletePayment({ id: e.id }).then((res) => {
                // console.log(res)
              });
            });
            this.$message({
              type: "success",
              message: "已删除!",
            });
            this.getCPageData({
              currentPage: this.currentPage,
              pageSize: this.pageSize,
            });
            // })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消批量删除",
            });
          });
      } else {
        this.$message({
          type: "warning",
          message: "请选择批量删除的数据!",
        });
      }
    },
    //更改每页数据
    handleSizeChange(val) {
      // console.log('更改');
      // console.log();
      this.pageSize = val;
      this.getCPageData({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
    },
    //更改当前页
    handleCurrentChange() {
      // console.log(this.currentPage);
      this.getCPageData({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
    },
    //新增请款
    toAddPorsonnel() {
      console.log("新增请款");
      this.$router.push({ path: "addPay", query: { key: "insert" } });
    },
    //拨款
    toPay(data, tableData) {
      this.$router.push({ path: "appropriation", query: { id: data.row.id } });
    },
    //修改
    updateRow(data, tableData) {
      // console.log(data);
      this.$router.push({
        path: "addPay",
        query: { key: "update", id: data.row.id },
      });
    },
    //删除
    deleteRow(row, index) {
      // console.log(index);
      this.$confirm("是否确认删除该请款", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "none",
      })
        .then(() => {
          deletePayment({ id: row.id }).then((res) => {
            // console.log(res)
            // this.tableData.splice(index, 1);
            this.$message({
              type: "success",
              message: "已删除!",
            });
            const data = {
              currentPage: this.currentPage,
              pageSize: this.pageSize,
            };
            this.getCPageData(data);
            // this.$router.push({ path: "quickFiling"})
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    formatDate(time) {
      const d = new Date(time);
      const strMonth =
        d.getFullYear() +
        "-" +
        this.p(d.getMonth() + 1) +
        "-" +
        this.p(d.getDate());
      const resTime =
        this.p(d.getHours()) +
        ":" +
        this.p(d.getMinutes()) +
        ":" +
        this.p(d.getSeconds());
      return strMonth + " " + resTime;
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    },
  },
};
</script>

<style lang="scss">
</style>